"use client";

//#region 引入
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { GetMangerInfo, SendApprove } from "@/app/api/operation/home";
import { ManagerData } from "../../../../utils/publictype";
import { TableDataType } from "../../../../utils/publicFuc";
import { Button, Divider, message, Row } from "antd";
import { getUserAccount } from "../../../../utils/defender";
import Link from "next/link";
import TextArea from "antd/es/input/TextArea";
//#endregion
export default function Manager() {
  //#region 初始化

  const param = useSearchParams();
  const [dataSource, setDataSource] = useState<ManagerData>();
  const [comment, setcomments] = useState("");
  const [sendflag,setSendFlag] = useState(false)

  useEffect(() => {
    GetMangerInfo(
      param.get("docid") as string,
      getUserAccount() as string
    ).then((res: any) => {
      setDataSource(TableDataType(res[0][0]));
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //#endregion

  //#region 操作
  const Submit = async (approve: string) => {
    try {
      const res: any = await SendApprove(
        param.get("docid") as string,
        approve,
        comment,
        getUserAccount() as string
      );
      if (res === "success") {
        message.success("送出成功");
        setSendFlag(true)
      }
    } catch {}
  };
  //#endregion

  //#region JSX
  const getCheckButton = () => {
    if (dataSource?.is_improve === "Y") {
      return (
        <Link
          className="manager-link"
          href={`/dashboard/improve/?docid=${param.get("docid")}`}
        >
          查看改善計劃書
        </Link>
      );
    }
  };
  //#endregion

  //#region Render
  return (
    <>
      <div className="interview-operator-1">
        <h3>主管簽核（{dataSource?.flow_phase}）</h3>
      </div>
      <Divider style={{ margin: "5px 0", background: "brown" }}></Divider>
      <Row className="form-row">
        <h4>表單信息：</h4>
      </Row>
      <Row style={{ marginTop: "10px" }}>
        <Link
          className="manager-link"
          href={`/dashboard/interview/?docid=${param.get("docid")}`}
        >
          查看面談記錄表
        </Link>
        {getCheckButton()}
      </Row>
      <Divider style={{ margin: "5px 0", background: "gray" }}></Divider>
      <Row className="form-row">
        <h4>流程審核：</h4>
      </Row>
      <Row className="form-row">
        <label>備註（選填）：</label>
        <TextArea
          rows={2}
          style={{ width: "400px" }}
          onChange={(e) => setcomments(e.target.value)}
        ></TextArea>
      </Row>
      <Divider style={{ margin: "5px 0", background: "brown" }}></Divider>
      <Row className="form-row">
        <Button type="primary" onClick={() => Submit("Y")} disabled={sendflag}>
          同意並送出
        </Button>
      </Row>
    </>
  );
  //#endregion
}
